<template>
	<view class="main-box">
		<view class="top-view">
			<view :class="['status-box', statusColor(shopInfo)]">{{getStatus(shopInfo)}}</view>
			<view class="" v-if="shopInfo.approveStatus == 2" style="">
				拒绝理由：{{ shopInfo.rejectNote }}
			</view>
		</view>
		<view class="white-border-box ">
			<view class="header-box">
				<view class="header-box-left-line"></view>
				<view class="header-box-title">个人信息</view>
			</view>
			<view class="form-block-box">
				
				<view class="form-block-box-flex-box">
					<view class="left-item">提报人</view>
					<view class="right-item">{{ shopInfo.memberName }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">手机号</view>
					<view class="right-item">{{ shopInfo.memberPhone }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">角色</view>
					<view class="right-item">{{ getOptiosValue(shopInfo.applyRole, 1) }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">门店来源</view>
					<view class="right-item">{{ getOptiosValue(shopInfo.shopSource, 2) }}</view>
				</view>
			</view>
		</view>
		<view class="white-border-box ">
			<view class="header-box">
				<view class="header-box-left-line"></view>
				<view class="header-box-title">选址信息</view>
			</view>
			<view class="form-block-box">
				<view class="form-block-box-flex-box">
					<view class="left-item">门店地址</view>
					<view class="right-item">{{ shopInfo.shopAddress }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">建议店名</view>
					<view class="right-item">{{ shopInfo.suggestionShopName }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">最近我司门店</view>
					<view class="right-item">{{ shopInfo.nearestShop }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">最近我司门店距离</view>
					<view class="right-item">{{ shopInfo.nearestShopDistance }} KM</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">商圈名称</view>
					<view class="right-item">{{ shopInfo.businessName }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">商圈类型</view>
					<view class="right-item">{{ getOptiosValue(shopInfo.businessType, 3) }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">店铺位置类型</view>
					<view class="right-item">{{ getOptiosValue(shopInfo.shopPositionType, 4) }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">店铺结构</view>
					<view class="right-item">{{ getOptiosValue(shopInfo.shopStructure, 5) }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">门头照片(四周)</view>
					<view class="right-item">
						<view v-for="(item, index) in shopInfo.doorPhoto" :key="index" @tap.stop>
							<u--image :showLoading="true" :src="item.url" width="80px" height="80px" @click="photoClick(index, shopInfo.doorPhoto)"></u--image>
						</view>
					</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">周边环境照片及热力图</view>
					<view class="right-item">
						<view v-for="(item, index) in shopInfo.envHeatMapPhoto" :key="index" @tap.stop>
							<u--image :showLoading="true" :src="item.url" width="80px" height="80px" @click="photoClick(index, shopInfo.envHeatMapPhoto)"></u--image>
						</view>
					</view>
				</view>
				
				<view class="form-block-box-flex-box">
					<view class="left-item">门店视频</view>
					<view class="right-item">
						<view v-for="(item, index) in shopInfo.shopInnerVideo" :key="index">
							<view class="look-video-box" @click="videoClick">点击查看</view>
						</view>
						<view class="" v-if="shopInfo.shopInnerVideo.length == 0">暂无视频</view>
					</view>
				</view>
			</view>
		</view>
		<view class="white-border-box ">
			<view class="header-box">
				<view class="header-box-left-line"></view>
				<view class="header-box-title">场地信息</view>
			</view>
			<view class="form-block-box">
				<view class="form-block-box-flex-box">
					<view class="left-item">门头尺寸</view>
					<view class="right-item">{{ shopInfo.doorSize }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">套内面积</view>
					<view class="right-item">{{ shopInfo.internalArea }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">营业面积</view>
					<view class="right-item">{{ shopInfo.businessArea }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">仓库面积</view>
					<view class="right-item">{{ shopInfo.warehouseArea }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">户型图</view>
					<view class="right-item">
						<view v-for="(item, index) in shopInfo.houseTypePhoto" :key="index" @tap.stop>
							<u--image :showLoading="true" :src="item.url" width="80px" height="80px" @click="photoClick(index, shopInfo.houseTypePhoto)"></u--image>
						</view>
					</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">是否考虑分租</view>
					<view class="right-item">{{ shopInfo.houseOperateSize}}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">是否考虑分租</view>
					<view class="right-item">{{ shopInfo.isConsiderSublet === 0 ? '否': '有' }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">是否可以改造</view>
					<view class="right-item">{{ shopInfo.isEnableUpgrade === 0 ? '否': '有' }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">是否需要改造：</view>
					<view class="right-item">{{ shopInfo.isNeedUpgrade === 0 ? '否': '有' }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">三相电</view>
					<view class="right-item">{{ shopInfo.threePhaseElectricity === 0 ? '无': '有' }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">交房时间</view>
					<view class="right-item">{{ shopInfo.houseDeliveryTime }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">计租时间</view>
					<view class="right-item">{{ shopInfo.rentCalculationTime }}</view>
				</view>
			</view>
		</view>
		<view class="white-border-box">
			<view class="header-box">
				<view class="header-box-left-line"></view>
				<view class="header-box-title">费用信息</view>
			</view>
			<view class="form-block-box">
				<view class="form-block-box-flex-box">
					<view class="left-item">转让费</view>
					<view class="right-item">{{ shopInfo.transferFee }} 元</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">押金</view>
					<view class="right-item">{{ shopInfo.deposit }} 元</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">房租</view>
					<view class="right-item">{{ shopInfo.rent }} 元/年</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">水费</view>
					<view class="right-item">{{ shopInfo.waterFee }} 元/吨</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">电费</view>
					<view class="right-item">{{ shopInfo.electricityFee }} 元/度</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">物业费</view>
					<view class="right-item">{{ shopInfo.propertyFee }} 元/年</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">房租递增预估</view>
					<view class="right-item">{{ shopInfo.houseDecreaseEstimate }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">支付方式</view>
					<view class="right-item">{{ payWay(shopInfo.rentPayWay) }}</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">预计营业额</view>
					<view class="right-item">{{ shopInfo.estimateTurnover }} 元/月</view>
				</view>
				<view class="form-block-box-flex-box">
					<view class="left-item">基础信息补充</view>
					<view class="right-item">{{ shopInfo.basicInfoSupplement }}</view>
				</view>
			</view>
		</view>
		<view class="video-pop-box" v-if="showVideo" >
			<video id="myVideo" :src="videoSrc" controls></video>
			<view class="close-box" @click="hideVideo">
				<u-icon size="24" name="close"></u-icon>
			</view>
		</view>
		<u-gap height="40" bgColor="#f2f4f6"></u-gap>
	</view>
</template>

<script>
	import text from '../../uni_modules/uview-ui/libs/config/props/text';
import http from '@/comment/vmeitime-http/interface.js'
	export default {
		data() {
			return {
				applyRoleOptions : [ // 申请角色选项
					{ name: 0, label: '市场专员' },
					{ name: 1, label: '（意向）加盟商' },
					{ name: 2, label: '加盟商' }
				],
				sourceOptions : [
					{ name: 0, label: '自选地址' },
					 { name: 1, label: '带铺加盟' },
					 { name: 3, label: '翻牌' }
				],
				subMarkerTypeOptions: [
					{ name: 0, label: '住宅型' },
					 { name: 1, label: '办公型' },
					 { name: 2, label: '学校型' },
					 { name: 3, label: '医院型' },
					 { name: 4, label: '商业型' },
					 { name: 5, label: '景区型' },
					 { name: 6, label: '交通枢纽型' },
					 { name: 7, label: '园区型' },
				],
				positionTypeOptions: [
					{ name: 0, label: '十字铺' },
					 { name: 1, label: '丁字型' },
					 { name: 2, label: '平铺型' },
					 { name: 3, label: '其他' },
				],
				shopStructureOptions: [
					{ name: 0, label: '一层' },
					 { name: 1, label: '二层' },
					 { name: 2, label: '其他' },
				],
				checkboxList1: [
					{
						name: '可转让',
						value: 0,
					},
					{
						name: '可转租',
						value: 1,
					},
					{
						value: 2,
						disabled: false
					}
				],
				shopInfo: {
					applyRole: 0,
					applyRoleValue: '',
					shopSource: 0,
					shopSourceValue: '',
					memberName: "", // 提报人
					menberPhone: "",	// 提报人手机号
					investmentManager: "",	
					suggestionShopName: "", // 门店建议名
					shopLat: "",
					shopLng: "",	
					shopAddress: "",	// 门店地址
					nearestShop: "",	// 最近我司门店
					nearestShopDistance: "",	// 最近我司门店距离
					businessName: "",
					businessType: 0,	// 商铺类型
					businessTypeValue: "",	
					shopPositionType: 0, // 店铺位置类型
					shopPositionTypeValue: "",
					shopStructure: 0,	// 店铺结构
					shopStructureValue: "",
					doorSize: "",	// 门头尺寸
					internalArea: "", // 套内面积
					businessArea: "", // 营业面积
					warehouseArea: "", // 仓库面积
					shopStatus: 0,
					houseOperateSize : "", // 房屋可操作性
					isConsiderSublet: 0, // 是否考虑分租
					isEnableUpgrade: 0, // 是否可以改造
					isNeedUpgrade: 0, // 是否需要改造
					doorPhoto: [],		// 门面照片
					shopInnerVideo: [],  // 店内视频
					envHeatMapPhoto: [], // 热力图
					houseTypePhoto: [], // 户型图 
					threePhaseElectricity: 0, // 三相电
					houseDeliveryTime: '', // 交房时间
					rentCalculationTime: "", // 计租时间
					deposit: "", // 押金
					transferFee: "", // 转让费
					rent: "",  // 房租
					waterFee: "" ,// 水费
					electricityFee : "", // 电费
					propertyFee : "", // 物业费
					houseDecreaseEstimate: "", // 房屋递曾预估
					estimateTurnover: "", // 预估营业额
					basicInfoSupplement: "", // 基本信息补充
					rentPayWay: "",	// 房租支付方式
					rentPayWayValue: "",
					isSublet: 0,
					note: "",
				},
				videoSrc: '',
				// 'http://192.168.3.210:8888/wechat/download?bucketName=franchise&objectName=/2024/12/26/4d03db05-dd91-4212-9200-ef2c63b24a62.jpg',
				showVideo: false,
			};
		},
		onLoad(e) {
			if (e.item) {
				var data = JSON.parse(decodeURIComponent(e.item))
				this.shopInfo = data;
				console.log(this.shopInfo);
				data.doorPhoto.forEach(item => {
					item.url =  http.config.baseUrl + item.objectName
				})
				data.envHeatMapPhoto.forEach(item => {
					item.url =  http.config.baseUrl + item.objectName
				})
				data.houseTypePhoto.forEach(item => {;
					item.url =  http.config.baseUrl + item.objectName
				})
				const arr = data.houseOperateSize.split(',')
				const dArr = this.checkboxList1;
				let str = ''
				arr.forEach((item, index) => {
					dArr.forEach(it => {
						if (it.value == item ) {
							if (index == 0) {
								str = it.name
							}else {
								str = str + '/' + it.name
							}
						}
					})
				})
				data.houseOperateSize = str;
			}
			
		},
		methods: {
			payWay(e) {
				const rentPayWayOptions = [
					{ value: '0', name: '年付' },
					{ value: '1', name: '半年付' },
					{ value: '2', name: '季付' },
					{ value: '3', name: '其他' },
				];
				var text = '';
				rentPayWayOptions.forEach(item => {
					if (item.value == e) {
						text = item.name;
					};
				})
				return text;
			},
			photoClick(index, sourceArr) {
				let objectArr = sourceArr;
				var imageArr = [];
				for (var i = 0; i < objectArr.length; i++) {
					const rrr = objectArr[i]
					const imgUrl = http.config.baseUrl + rrr.objectName;
					imageArr.push(imgUrl);
				}
				uni.previewImage({
					urls: imageArr,
					current: index,
					success() {}
				})
			},
			videoClick() {
				// 'https://media.w3.org/2010/05/sintel/trailer.mp4';//
				this.videoSrc = http.config.baseUrl + this.shopInfo.shopInnerVideo[0].objectName;
				this.showVideo = true;
			},
			hideVideo() {
				this.showVideo = false;
			},
			getStatus(item) {
				if (item.approveStatus === 0) {
					return '待审核'
				}else if (item.approveStatus === 1) {
					return '已通过'
				}else if (item.approveStatus === 2) {
					return '未通过'
				}
				return ''
			},
			statusColor(item) {
				if (item.approveStatus === 0) {
					return 'status_1'
				}else if (item.approveStatus === 1) {
					return 'status_2'
				}else if (item.approveStatus === 2) {
					return 'status_3'
				}
				return ''
			},
			getOptiosValue(value, type) {
				let arr = this.applyRoleOptions;
				if (type == 1) {
					arr = this.applyRoleOptions;
				} else if (type == 2) {
					arr = this.sourceOptions;
				} else if (type == 3) {
					arr = this.subMarkerTypeOptions;
				} else if (type == 4) {
					arr = this.positionTypeOptions;
				}  else if (type == 5) {
					arr = this.shopStructureOptions;
				} 

				let data = '';
				arr.forEach(item => {
					if (item.name == value) {
						data = item.label;
					};
				})
				return data;
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f2f4f6;
		width: 100%;
	}
	
	.main-box{
		position: relative;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);  
		.video-pop-box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.9);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 20px;
			z-index: 100;
			#myVideo {
			  width: 100%;
			  height: 300px;
			}
			.close-box{
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.9);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.top-view{
			background-color: white;
			padding: 16px;
			margin-bottom: 12px;
			box-sizing: border-box;
			position: sticky;
			top: 0;
			background-color: white;
			z-index: 10;
			.status-box {
				font-size: 26px;
				font-weight: bold;
				margin-bottom: 10px;
			}
		}
		.white-border-box {
			background-color: white;
			margin: 0px 12px;
			margin-bottom: 12px;
			border-radius: 5px;
			min-height: 50px;
			width: calc(100% - 24px);
			.header-box {
				position: relative;
				height: 36px;
				padding: 8px;
				display: flex;
				align-items: center;
				gap: 8px;
				border-bottom: 1px solid #d6d7d9;
				&-left-line {
					height: 18px;
					width: 4px;
					border-radius: 4px;
					background-color: $theme-color;
				}
				&-title {
					font-size: 18px;
					color: #000;
				}
			}
			.form-block-box{
				padding: 8px 16px;
				padding-bottom: 4px;
				&-flex-box {
					display: flex;
					align-items: center;
					line-height: 30px;
					min-height: 40px;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(228, 228, 228, 1);
					.left-item {
						width: 100px;
					}
					.right-item {
						flex: 1;
						display: flex;
						justify-content: flex-end;
						text-align: right;
						gap: 5px;
						// .photo-box{
						// 	width: 80px;
						// 	height: 80px;
						// }
					}
				}
			}
		}
		.look-video-box{
			color: $theme-color;
		}
		.status_1{
			color: #f6cf32;
		}
		.status_2{
			color: #28f67b;
		}
		.status_3{
			color: #f61216;
		}
	}
</style>
